<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>前端原型 - 主页面</title>
  <link rel="stylesheet" href="../assets/wireframe.css" />
</head>
<body>
  <div class="app-shell">
    <header class="wf-header">
      <div class="wf-title">火星情报局</div>
    </header>

    <main class="wf-container wf-content">
      <!-- Home Tab -->
      <section data-tab="home">
        <!-- 顶部功能区 - 灰阶线框布局 -->
        <div style="margin-bottom:20px">
          <!-- 第一行：智能体特色卡片 -->
          <div class="wf-card" style="margin-bottom: 12px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div>
                <div style="font-size: 18px; font-weight: 600; margin-bottom: 4px;">智能体</div>
                <div style="font-size: 12px; color: #888;">探索多样化的AI智能体，开启智能对话新体验</div>
              </div>
              <div style="width: 60px; height: 60px; background: #eee; border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                <div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%;"></div>
              </div>
            </div>
          </div>
          
          <!-- 第二行：两个中等卡片 -->
          <div style="display: flex; gap: 12px; margin-bottom: 12px;">
            <a class="wf-card" href="./large-model.html" style="flex: 1; text-decoration: none; color: inherit;">
              <div style="display: flex; align-items: center;">
                <div style="width: 40px; height: 40px; background: #eee; border-radius: 8px; margin-right: 12px;"></div>
                <div>
                  <div style="font-weight: 600; margin-bottom: 2px;">大模型</div>
                  <div style="font-size: 12px; color: #888;">全球顶尖AI大模型</div>
                </div>
              </div>
            </a>
            <a class="wf-card" href="./text-to-image.html" style="flex: 1; text-decoration: none; color: inherit;">
              <div style="display: flex; align-items: center;">
                <div style="width: 40px; height: 40px; background: #eee; border-radius: 8px; margin-right: 12px;"></div>
                <div>
                  <div style="font-weight: 600; margin-bottom: 2px;">文生图</div>
                  <div style="font-size: 12px; color: #888;">AI智能图像生成</div>
                </div>
              </div>
            </a>
          </div>
          
          <!-- 第三行：图片改造功能卡片 -->
          <a class="wf-card" href="./image-transform.html" style="text-decoration: none; color: inherit;">
            <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
              <div style="width: 50px; height: 50px; background: #eee; border-radius: 10px; margin-bottom: 8px;"></div>
              <div style="font-size: 16px; font-weight: 600; margin-bottom: 4px;">图像改造</div>
              <div style="font-size: 12px; color: #888;">智能图像处理与风格转换</div>
            </div>
          </a>
        </div>
        
        <!-- 最近对话 -->
        <div class="wf-section-title" style="margin-top: 20px;">最近对话</div>
        <div class="wf-card">
          <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;">
            <div style="width: 40px; height: 40px; background: #eee; border-radius: 50%; margin-right: 12px;"></div>
            <div style="flex: 1;">
              <div style="font-weight: 600; margin-bottom: 4px;">与助手A的对话</div>
              <div style="font-size: 12px; color: #888;">你好，有什么可以帮助您的吗？</div>
            </div>
            <div style="font-size: 12px; color: #888;">2分钟前</div>
          </div>
          <div style="display: flex; align-items: center; padding: 12px 0;">
            <div style="width: 40px; height: 40px; background: #eee; border-radius: 50%; margin-right: 12px;"></div>
            <div style="flex: 1;">
              <div style="font-weight: 600; margin-bottom: 4px;">与导师B的对话</div>
              <div style="font-size: 12px; color: #888;">今天学习什么内容？</div>
            </div>
            <div style="font-size: 12px; color: #888;">1小时前</div>
          </div>
        </div>
      </section>

      <!-- Inspiration Tab -->
      <section data-tab="inspiration" style="display:none">
        <div class="wf-section-title">灵感社区</div>
        <div class="wf-grid">
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #1</div><div class="wf-block-desc">点赞/收藏</div></a></div>
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #2</div><div class="wf-block-desc">点赞/收藏</div></a></div>
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #3</div><div class="wf-block-desc">点赞/收藏</div></a></div>
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #4</div><div class="wf-block-desc">点赞/收藏</div></a></div>
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #5</div><div class="wf-block-desc">点赞/收藏</div></a></div>
          <div class="col-6"><a class="wf-block" href="./image-detail.html"><div class="wf-block-thumb"></div><div class="wf-block-title">作品 #6</div><div class="wf-block-desc">点赞/收藏</div></a></div>
        </div>
      </section>

      <!-- DIY Tab -->
      <section data-tab="diy" style="display:none">
        <div class="wf-section-title">DIY 制作</div>
        <div class="wf-grid">
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">手机壳</div><div class="wf-block-desc">个性化定制</div></a></div>
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">钥匙扣</div><div class="wf-block-desc">创意设计</div></a></div>
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">鼠标垫</div><div class="wf-block-desc">办公必备</div></a></div>
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">马克杯</div><div class="wf-block-desc">生活用品</div></a></div>
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">键盘贴</div><div class="wf-block-desc">个性装饰</div></a></div>
          <div class="col-6"><a class="wf-block" href="./diy.html"><div class="wf-block-thumb"></div><div class="wf-block-title">更多商品</div><div class="wf-block-desc">敬请期待</div></a></div>
        </div>
      </section>

      <!-- Roles Tab -->
      <section data-tab="roles" style="display:none">
        <div class="wf-section-title">智能体</div>
        <div class="wf-row">
          <span class="wf-chip">全部</span><span class="wf-chip">助手</span><span class="wf-chip">导师</span><span class="wf-chip">娱乐</span>
        </div>
        <div class="wf-grid" style="margin-top:12px">
          <div class="col-6"><a class="wf-block" href="./chat.html"><div class="wf-block-thumb"></div><div class="wf-block-title">助手A</div><div class="wf-block-desc">开始对话</div></a></div>
          <div class="col-6"><a class="wf-block" href="./chat.html"><div class="wf-block-thumb"></div><div class="wf-block-title">导师B</div><div class="wf-block-desc">开始对话</div></a></div>
          <div class="col-6"><a class="wf-block" href="./chat.html"><div class="wf-block-thumb"></div><div class="wf-block-title">娱乐C</div><div class="wf-block-desc">开始对话</div></a></div>
          <div class="col-6"><a class="wf-block" href="./chat.html"><div class="wf-block-thumb"></div><div class="wf-block-title">创作D</div><div class="wf-block-desc">开始对话</div></a></div>
        </div>
      </section>

      <!-- Profile Tab -->
      <section data-tab="profile" style="display:none">
        <!-- 顶部用户信息区域 -->
        <div class="wf-card" style="margin-bottom: 16px;">
          <div style="display: flex; align-items: center; padding: 20px 0;">
            <div style="width: 60px; height: 60px; background: #eee; border-radius: 30px; margin-right: 16px;"></div>
            <div style="flex: 1;">
              <div style="font-size: 18px; font-weight: 600; margin-bottom: 4px;">用户名</div>
              <div style="font-size: 12px; color: #888;">ID: 12345</div>
            </div>
            <div style="background: #eee; padding: 6px 12px; border-radius: 12px; font-size: 12px; color: #666;">VIP</div>
          </div>
        </div>
        
        <!-- 功能列表 -->
        <div class="wf-card">
          <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;">
            <div style="width: 24px; height: 24px; background: #eee; border-radius: 4px; margin-right: 12px;"></div>
            <div style="flex: 1;">我的作品</div>
            <div style="color: #888; font-size: 12px;">12</div>
          </div>
          <div style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;">
            <div style="width: 24px; height: 24px; background: #eee; border-radius: 4px; margin-right: 12px;"></div>
            <div style="flex: 1;">我的喜欢</div>
            <div style="color: #888; font-size: 12px;">8</div>
          </div>
          <div style="display: flex; align-items: center; padding: 12px 0;">
            <div style="width: 24px; height: 24px; background: #eee; border-radius: 4px; margin-right: 12px;"></div>
            <div style="flex: 1;">设置</div>
            <div style="color: #888; font-size: 12px;">></div>
          </div>
        </div>
      </section>
    </main>

    <a class="wf-fab-center" href="./super-search.html">超级搜索</a>
    <nav class="wf-tabs">
      <a class="wf-tab active" data-tab-target="home" href="#">首页</a>
      <a class="wf-tab" data-tab-target="inspiration" href="#">灵感</a>
      <a class="wf-tab" data-tab-target="diy" href="#">DIY</a>
      <a class="wf-tab" data-tab-target="roles" href="#">智能体</a>
      <a class="wf-tab" data-tab-target="profile" href="#">我的</a>
    </nav>
  </div>
  <script src="../assets/wireframe.js"></script>
  <script>
    // 退出功能已移除，保持简洁
  </script>
</body>
</html>


